////
/// Components
/// PillSwitch
////

@import 'utils/shared/layout';
@import 'components/Patterns/props';
@import 'props';

.PillSwitch {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: pill-switch(size);
  height: pill-switch(size);

  @media screen and (min-width: get-breakpoint(tablet)) {
    width: pill-switch(size, tablet);
    height: pill-switch(size, tablet);
  }
}

.PillSwitchTrack {
  @include pill-switch-track-layout;
  @include pill-switch-border(get-border());
  position: absolute;
  top: 50%;
  left: 50%;
  color: get-color(brand, blue);
  background-color: white;
  transform: rotate(-45deg);
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -(get-border());
    right: -(get-border());
    bottom: -(get-border());
    left: -(get-border());
    display: block;
    background-color: get-color(coal, dark);
    transition: opacity get-duration(fast) get-easing();
  }

  @media screen and (min-width: get-breakpoint(tablet)) {
    @include pill-switch-track-layout('tablet');
    @include pill-switch-border(get-border(thick));
  }

  // halftone is always animated and blue to mitigate slight transition inconsistency...
  // ::after overlays it so its fine
  .Pattern--typeHalftone {
    @include pattern-halftone-animated;
    height: pill-switch(size);
    transform: rotate(45deg);

    @media screen and (min-width: get-breakpoint(tablet)) {
      height: pill-switch(size, tablet);
    }
  }
}

.PillSwitchControl {
  @include flex-center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: pill-switch(control-size);
  height: pill-switch(control-size);
  color: get-color(coal, dark);
  background-color: white;
  border: get-border() solid currentColor;
  border-radius: 50%;
  transition: color get-duration(fast) get-easing();

  @media screen and (min-width: get-breakpoint(tablet)) {
    width: pill-switch(control-size, tablet);
    height: pill-switch(control-size, tablet);
    border-width: get-border(thick);
  }

  // visually center
  .Heading {
    margin-top: -0.1em;
    margin-left: -0.05em;
  }

  &:focus,
  &:hover,
  &.draggable-mirror {
    color: get-color(brand, blue);
  }

  &:active {
    color: get-color(brand, blue-dark);
  }

  &.draggable-source--is-dragging {
    @include visible(false);
  }
}

@import 'variants';
